<template>
  <div>
      <div class="songlists">
        <span class="iconfont icon-xiangzuojiantou left" @click="back"><span>歌单</span></span>
        <!-- <router-link to="/recommend" tag="span" class="iconfont icon-xiangzuojiantou left"> -->
          <!-- <span>歌单</span> -->
        <!-- </router-link> -->
        <div class="bigImg">
          <div class="bgimg">
            <div class="img">
              <img :src="bgImg!=null?bgImg:img" alt=""/>
            </div>
            <!-- <span class="bofang"><span class="iconfont icon-bofang1 bfa"></span>{{playCount|playCountData}}</span> -->
          </div>
          <div class="bgtitle">
            <h4>{{titlename}}</h4>
            <div class="author">
              <div class="authorimg">
                <img :src="avatarUrl" alt="">
              </div>
              <p>{{nickname}}</p>
            </div>
          </div>
        </div>
        <div class="collectBox">
          <div class="cbBtn">
            <span class="iconfont icon-shoucang sc1" v-show="t==2" @click="check"></span>
            <span class="iconfont icon-shoucangxuanzhong sc2" v-show="t==1" @click="check"></span>
            <span class="num">{{songlists.subscribedCount|playCountData}}</span>
          </div>
          <div class="plBtn">
            <span class="iconfont icon-pinglun pl1" @click="GDID"></span>
            <!-- <router-link class="iconfont icon-pinglun pl1" tag="span" :to="'../components/rank/remarkLists?id='+getGDID"></router-link> -->
            <span class="num">{{songlists.commentCount|playCountData}}</span>
          </div>
        </div>
        <div class="content">
          <div class="all" @click="AllPlay">
            <div>
              <span class="iconfont icon-bofang1 bf1"></span>
            </div>
            <span class="allplay">全部播放 (共{{lisLength}}首)</span>
          </div>
          <div class="contentList">
            <ul>
              <li v-for="(item,index) in songlists.tracks" :key="index" @click="getID(item.id)">
                <div class="num">{{index+1}}</div>
                <div class="lists">
                  <h4>{{item.name}}</h4>
                  <p>{{item.ar[0].name}}</p>
                </div>
              </li>
              <!-- <li>
                <div class="num">2</div>
                <div class="lists">
                  <h4>歌名</h4>
                  <p>歌手</p>
                </div>
              </li>
              <li>
                <div class="num">3</div>
                <div class="lists">
                  <h4>歌名</h4>
                  <p>歌手</p>
                </div>
              </li> -->
            </ul>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import {getPlaylistSubscribe,getPlaylistDetail} from "../api/recommend";
import { Toast } from 'vant';

export default {
    data(){
      return{
        data:[],
        songlists:[],
        bgImg:null,
        img:null,
        nickname:null,
        titlename:null,
        avatarUrl:null,// 创建者头像
        playCount:null,
        lisLength:0,
        t:2,// 判断是否收藏
        getGDID:null,// 获取歌单id
      }
    },
    methods:{
      // 全部播放
      AllPlay(){
        this.getID(this.songlists.tracks[0].id)
      },
      // 返回上一页
      back(){
          this.$router.back();
      },
      // 传递歌单ID获取评论
      GDID(){
        this.$router.push({name:'remarkLists',params:{gdid:this.getGDID}});
      },
      // 收藏点击按钮
      check(){
        this.t = this.t==1?2:1;
        if(this.t==1){
          Toast("添加收藏");
        }else{
          Toast("取消收藏");
        }
        this.getPlaylistSubscribeFun();
      },
      // 收藏歌单接口
      getPlaylistSubscribeFun(){
        getPlaylistSubscribe({id:this.getGDID,t:this.t}).then(data=>{
          console.log('qweq',data)
        })
      },
      // 获取歌曲id
      getID(id){
        console.log(id)
        this.$emit("get-player-id",id)// 传递歌曲id
        this.$emit("get-play-all-id",this.getGDID);//传递歌单id
      },
      // 获取歌单歌曲
      getPlaylistDetailFun(id){
        getPlaylistDetail({id:id}).then(data=>{
          // this.$router.push({name:'songlists',params:data})
          this.data = data;
          this.$emit("get-ssongslistFun",data.playlist);
          console.log(data)
          this.dataFun();
        })
      },
      dataFun(){
        // 获取数据
        this.getGDID = this.data.playlist.id;
        console.log("aabc",this.data)
        // 获取歌曲数据
        this.songlists = this.data.playlist;
        // 获取背景图片
        this.bgImg = this.data.playlist.backgroundCoverUrl
        this.img = this.data.playlist.coverImgUrl
        // 获取歌单创建者
        this.nickname = this.data.playlist.creator.nickname
        // 获取创建者头像
        this.avatarUrl = this.data.playlist.creator.avatarUrl
        // 获取歌单名
        this.titlename = this.data.playlist.name
        // 获取播放人数
        this.playCount = this.data.playlist.playCount
        // 获取歌单歌曲数量
        this.lisLength = this.songlists.tracks.length
      }
    },
    created(){
      this.getPlaylistDetailFun(this.$route.query.id);// 获取歌单数据接口
      console.log(this.$route.query)
    },
    // 过滤器
    filters:{
      playCountData(value){
        // let w = value > 10000? value / 10000 : value; // 万计算
        let y = value > 100000000? parseInt(value/1000)/10+"亿": parseInt(value)>10000?parseInt(value/1000)/10 + "万":value;//亿计算
        return y;
      }
    },
}
</script>

<style lang="less">
  .songlists{
    position: relative;
    .left{
      position: absolute;
      z-index: 2;
      color: rgb(221, 221, 221);
      font-size: 20px;
      top: 10px;
      left: 10px;
      span{
        margin-left: 5px;
        font-size: 18px;
        line-height: 18px;
        font-weight: bold;
      }
    }
    .bigImg{
      display: flex;
      width: 85%;
      padding: 0px 28px;
      height: 180px;
      align-items: center;
      position: relative;
      background-image: linear-gradient(to bottom,#666 0%,#aaa 100%);
      .bgimg{
        width: 80px;
        height: 80px;
        overflow: hidden;
        position: relative;
        flex: 1;
        .img{
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 3;
          border-radius: 10px;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .bofang{
          position: absolute;
          right: 0px;
          top: 0px;
          z-index: 5;
          color: white;
          font-size: 12px;
          .bfa{
            font-size: 12px;
          }
        }
      }
      .bgtitle{
        flex: 3;
        margin-left: 10px;
        h4{
          font-weight: bold;
          color: white;
        }
        .author{
          display: flex;
          align-items: center;
          line-height: 30px;
          .authorimg{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 5px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          p{
            color: rgb(221, 221, 221);
            font-size: 14px;
          }
        }
      }
      
      
    }
    .collectBox{
      position:absolute;
      top: 11%;
      left: 30%;
      background-color: white;
      display: flex;
      padding: 10px 0px;
      border-radius: 20px;
      border: 1px solid #eee;
      box-shadow: 0px 2px 5px #cacaca;
      .cbBtn{
        padding: 0px 10px;
        border-right: 1px solid #ccc;
        .sc2{
          color: rgb(240, 211, 46);
        }
        .num{
          margin-left: 5px;
          font-size: 14px;
          color: #999;
        }
      }
      .plBtn{
        padding: 0px 10px;
        .num{
          margin-left: 5px;
          font-size: 14px;
          color: #999;
        }
      }
    }
    .content{
      margin-top: 15px;
      .all{
        padding: 8px 10px;
        display: flex;
        align-items: center;
        font-weight: bold;
        div{
          position: relative;
          background-color: red;
          border-radius: 50%;
          width: 24px;
          height: 24px;
          margin-right: 10px;
          .bf1{
            position: absolute;
            top: 28%;
            left: 7px;
            font-size: 12px;
            color:white;
          }
        }
      }
      .contentList{
        width: 100%;
        ul{
          li{
            display: flex;
            padding: 10px 0px;
            align-items: center;
            .num{
              text-align: center;
              padding: 10px 18px;
            }
            .lists{
              h4{
                font-weight: bold;
              }
              p{
                color: #999;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
</style>